
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-neirongwendang"></i>
                    <div class="name">内容/文档</div>
                    <div class="fontclass">.icon-neirongwendang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-301"></i>
                    <div class="name">换一批</div>
                    <div class="fontclass">.icon-301</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fengliangjibie1"></i>
                    <div class="name">风量级别－1</div>
                    <div class="fontclass">.icon-fengliangjibie1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yumaoqiukongxin"></i>
                    <div class="name">羽毛球空心</div>
                    <div class="fontclass">.icon-yumaoqiukongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renzhengyouxiang"></i>
                    <div class="name">认证邮箱</div>
                    <div class="fontclass">.icon-renzhengyouxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fankui"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-fankui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shape3"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-shape3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-geren"></i>
                    <div class="name">个人</div>
                    <div class="fontclass">.icon-geren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti1"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-weibiaoti1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingbienv"></i>
                    <div class="name">性别女</div>
                    <div class="fontclass">.icon-xingbienv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiao15"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-tubiao15</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baozhang"></i>
                    <div class="name">保障</div>
                    <div class="fontclass">.icon-baozhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iosfootball"></i>
                    <div class="name">ios-football</div>
                    <div class="fontclass">.icon-iosfootball</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontdizhi"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.icon-iconfontdizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon1"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-icon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-htmal5icon21"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-htmal5icon21</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuwutiyandingyi"></i>
                    <div class="name">服务体验定义</div>
                    <div class="fontclass">.icon-fuwutiyandingyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenzhang"></i>
                    <div class="name">文章</div>
                    <div class="fontclass">.icon-wenzhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jubao"></i>
                    <div class="name">举报</div>
                    <div class="fontclass">.icon-jubao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuequ"></i>
                    <div class="name">5 学校名称</div>
                    <div class="fontclass">.icon-xuequ</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zankongxingai"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.icon-zankongxingai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kechengbiao"></i>
                    <div class="name">课程表</div>
                    <div class="fontclass">.icon-kechengbiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quanzfl"></i>
                    <div class="name">项目管理</div>
                    <div class="fontclass">.icon-quanzfl</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yue"></i>
                    <div class="name">余额</div>
                    <div class="fontclass">.icon-yue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianxi"></i>
                    <div class="name">联系</div>
                    <div class="fontclass">.icon-lianxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-didian"></i>
                    <div class="name">地点</div>
                    <div class="fontclass">.icon-didian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caiwurenminbizhifu"></i>
                    <div class="name">财务 人民币 支付</div>
                    <div class="fontclass">.icon-caiwurenminbizhifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouquanguanli"></i>
                    <div class="name">授权管理</div>
                    <div class="fontclass">.icon-shouquanguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenhao1"></i>
                    <div class="name">问号 (1)</div>
                    <div class="fontclass">.icon-wenhao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ad80-copy"></i>
                    <div class="name">验证码</div>
                    <div class="fontclass">.icon-ad80-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">主页</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-run"></i>
                    <div class="name">跑步</div>
                    <div class="fontclass">.icon-run</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cardb"></i>
                    <div class="name">卡</div>
                    <div class="fontclass">.icon-cardb</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jia1"></i>
                    <div class="name">加 (1)</div>
                    <div class="fontclass">.icon-jia1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-houtaiguanli"></i>
                    <div class="name">后台管理</div>
                    <div class="fontclass">.icon-houtaiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caidan"></i>
                    <div class="name">菜单</div>
                    <div class="fontclass">.icon-caidan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yinxingqia"></i>
                    <div class="name">银行卡</div>
                    <div class="fontclass">.icon-yinxingqia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangxiangshang"></i>
                    <div class="name">方向 - 上</div>
                    <div class="fontclass">.icon-fangxiangshang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zan"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.icon-zan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinglun"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.icon-pinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fabu"></i>
                    <div class="name">发布</div>
                    <div class="fontclass">.icon-fabu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qita"></i>
                    <div class="name">其它</div>
                    <div class="fontclass">.icon-qita</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaolian1"></i>
                    <div class="name">老师</div>
                    <div class="fontclass">.icon-jiaolian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qbzuocesvg02"></i>
                    <div class="name">问题</div>
                    <div class="fontclass">.icon-qbzuocesvg02</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiangbei"></i>
                    <div class="name">奖杯</div>
                    <div class="fontclass">.icon-jiangbei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riqi"></i>
                    <div class="name">日期</div>
                    <div class="fontclass">.icon-riqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-directionbottom"></i>
                    <div class="name">方向 - 下</div>
                    <div class="fontclass">.icon-directionbottom</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuijian"></i>
                    <div class="name">推荐</div>
                    <div class="fontclass">.icon-tuijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xitong"></i>
                    <div class="name">系统</div>
                    <div class="fontclass">.icon-xitong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinlang"></i>
                    <div class="name">新浪</div>
                    <div class="fontclass">.icon-xinlang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-06"></i>
                    <div class="name">篮球</div>
                    <div class="fontclass">.icon-06</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mubiao"></i>
                    <div class="name">目标</div>
                    <div class="fontclass">.icon-mubiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-app"></i>
                    <div class="name">app</div>
                    <div class="fontclass">.icon-app</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-piaowu"></i>
                    <div class="name">票务</div>
                    <div class="fontclass">.icon-piaowu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-addmark"></i>
                    <div class="name">备注1</div>
                    <div class="fontclass">.icon-addmark</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quanzi_renshu"></i>
                    <div class="name">圈子_人数</div>
                    <div class="fontclass">.icon-quanzi_renshu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipin"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-shipin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupian"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qizi"></i>
                    <div class="name">旗子</div>
                    <div class="fontclass">.icon-qizi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youfanye"></i>
                    <div class="name">右翻页</div>
                    <div class="fontclass">.icon-youfanye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sale"></i>
                    <div class="name">sale</div>
                    <div class="fontclass">.icon-sale</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fabu1"></i>
                    <div class="name">发布</div>
                    <div class="fontclass">.icon-fabu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nan"></i>
                    <div class="name">男</div>
                    <div class="fontclass">.icon-nan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanjing"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-yanjing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_answer_hover"></i>
                    <div class="name">icon_answer_hover</div>
                    <div class="fontclass">.icon-icon_answer_hover</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_question_hover"></i>
                    <div class="name">icon_question_hover</div>
                    <div class="fontclass">.icon-icon_question_hover</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-saishi"></i>
                    <div class="name">赛事</div>
                    <div class="fontclass">.icon-saishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingbie-nv"></i>
                    <div class="name">性别-女</div>
                    <div class="fontclass">.icon-xingbie-nv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-noun__cc"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-noun__cc</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingpangkongxin"></i>
                    <div class="name">乒乓空心1</div>
                    <div class="fontclass">.icon-pingpangkongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangqiu1"></i>
                    <div class="name">网球</div>
                    <div class="fontclass">.icon-wangqiu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qq"></i>
                    <div class="name">QQ</div>
                    <div class="fontclass">.icon-qq</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhuidingbu"></i>
                    <div class="name">返回顶部</div>
                    <div class="fontclass">.icon-fanhuidingbu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanjing1"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-yanjing1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianxiren"></i>
                    <div class="name">联系人</div>
                    <div class="fontclass">.icon-lianxiren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renzheng2"></i>
                    <div class="name">认证</div>
                    <div class="fontclass">.icon-renzheng2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gerenrenzheng1"></i>
                    <div class="name">个人认证</div>
                    <div class="fontclass">.icon-gerenrenzheng1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxi"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-xiaoxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhichu"></i>
                    <div class="name">支出</div>
                    <div class="fontclass">.icon-zhichu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guankan"></i>
                    <div class="name">观看</div>
                    <div class="fontclass">.icon-guankan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiangpai-"></i>
                    <div class="name">奖牌-03</div>
                    <div class="fontclass">.icon-jiangpai-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiangpai-1"></i>
                    <div class="name">奖牌-02</div>
                    <div class="fontclass">.icon-jiangpai-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhifubao"></i>
                    <div class="name">支付宝</div>
                    <div class="fontclass">.icon-zhifubao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shou"></i>
                    <div class="name">收</div>
                    <div class="fontclass">.icon-shou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianji"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibo"></i>
                    <div class="name">微博</div>
                    <div class="fontclass">.icon-weibo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lajitong"></i>
                    <div class="name">垃圾桶</div>
                    <div class="fontclass">.icon-lajitong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiangpai-2"></i>
                    <div class="name">奖牌-01</div>
                    <div class="fontclass">.icon-jiangpai-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qqkongjian"></i>
                    <div class="name">qq空间</div>
                    <div class="fontclass">.icon-qqkongjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-banjiguanli"></i>
                    <div class="name">班级管理</div>
                    <div class="fontclass">.icon-banjiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baomingrenshu"></i>
                    <div class="name">报名人数</div>
                    <div class="fontclass">.icon-baomingrenshu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiwancheng"></i>
                    <div class="name">已完成</div>
                    <div class="fontclass">.icon-yiwancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixinzhifu"></i>
                    <div class="name">微信支付</div>
                    <div class="fontclass">.icon-weixinzhifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo_sousuo"></i>
                    <div class="name">搜索_搜索</div>
                    <div class="fontclass">.icon-sousuo_sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingbie-nan"></i>
                    <div class="name">性别-男</div>
                    <div class="fontclass">.icon-xingbie-nan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang1"></i>
                    <div class="name">收 藏</div>
                    <div class="fontclass">.icon-shoucang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youfanye-copy"></i>
                    <div class="name">右翻页</div>
                    <div class="fontclass">.icon-youfanye-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daizhifu"></i>
                    <div class="name">待支付</div>
                    <div class="fontclass">.icon-daizhifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdan"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-QQkongjian"></i>
                    <div class="name">QQ空间</div>
                    <div class="fontclass">.icon-QQkongjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gou"></i>
                    <div class="name">钩</div>
                    <div class="fontclass">.icon-gou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin1"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang1"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bofang"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanjing2"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-yanjing2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remen"></i>
                    <div class="name">热门</div>
                    <div class="fontclass">.icon-remen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tijiaoshibai"></i>
                    <div class="name">提交失败</div>
                    <div class="fontclass">.icon-tijiaoshibai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjia"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-tianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duichang"></i>
                    <div class="name">队长</div>
                    <div class="fontclass">.icon-duichang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-morentouxiang"></i>
                    <div class="name">默认头像</div>
                    <div class="fontclass">.icon-morentouxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liaotianqipao"></i>
                    <div class="name">聊天气泡</div>
                    <div class="fontclass">.icon-liaotianqipao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baozhengjin"></i>
                    <div class="name">保证金</div>
                    <div class="fontclass">.icon-baozhengjin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renzheng"></i>
                    <div class="name">认证</div>
                    <div class="fontclass">.icon-renzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-orgnize"></i>
                    <div class="name">组织</div>
                    <div class="fontclass">.icon-orgnize</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-toubiaochenggong"></i>
                    <div class="name">投标成功</div>
                    <div class="fontclass">.icon-toubiaochenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaofu"></i>
                    <div class="name">交付</div>
                    <div class="fontclass">.icon-jiaofu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhaoshangkaibiao"></i>
                    <div class="name">招商开标</div>
                    <div class="fontclass">.icon-zhaoshangkaibiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hetong"></i>
                    <div class="name">合同</div>
                    <div class="fontclass">.icon-hetong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fankui1"></i>
                    <div class="name">反馈</div>
                    <div class="fontclass">.icon-fankui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanzhu"></i>
                    <div class="name">赞助</div>
                    <div class="fontclass">.icon-zanzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-directionbottom-copy"></i>
                    <div class="name">方向 - 下</div>
                    <div class="fontclass">.icon-directionbottom-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu-copy"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu-copy1"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu-copy1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianji-copy"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianji-copy1"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji-copy1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjia-copy"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-tianjia-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon11-copy"></i>
                    <div class="name">认证-成功-填充</div>
                    <div class="fontclass">.icon-icon11-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tixing-copy"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.icon-tixing-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdanxinxi"></i>
                    <div class="name">订单信息</div>
                    <div class="fontclass">.icon-dingdanxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-canyu"></i>
                    <div class="name">参与</div>
                    <div class="fontclass">.icon-canyu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingzhun"></i>
                    <div class="name">精准</div>
                    <div class="fontclass">.icon-jingzhun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guojihua"></i>
                    <div class="name">国际化</div>
                    <div class="fontclass">.icon-guojihua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingjiabi"></i>
                    <div class="name">性价比</div>
                    <div class="fontclass">.icon-xingjiabi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tanpan"></i>
                    <div class="name">谈判</div>
                    <div class="fontclass">.icon-tanpan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingxuan"></i>
                    <div class="name">精选</div>
                    <div class="fontclass">.icon-jingxuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhihang"></i>
                    <div class="name">执行</div>
                    <div class="fontclass">.icon-zhihang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zongjie"></i>
                    <div class="name">总结</div>
                    <div class="fontclass">.icon-zongjie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongguo"></i>
                    <div class="name">通过</div>
                    <div class="fontclass">.icon-tongguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jihuo"></i>
                    <div class="name">激活</div>
                    <div class="fontclass">.icon-jihuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renzheng1"></i>
                    <div class="name">认证</div>
                    <div class="fontclass">.icon-renzheng1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuiguang"></i>
                    <div class="name">推广</div>
                    <div class="fontclass">.icon-tuiguang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-VIP"></i>
                    <div class="name">VIP</div>
                    <div class="fontclass">.icon-VIP</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenhe"></i>
                    <div class="name">审核</div>
                    <div class="fontclass">.icon-shenhe</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipin1"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-shipin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-men"></i>
                    <div class="name">门</div>
                    <div class="fontclass">.icon-men</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanzhujin"></i>
                    <div class="name">赞助金</div>
                    <div class="fontclass">.icon-zanzhujin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiuchang"></i>
                    <div class="name">球场</div>
                    <div class="fontclass">.icon-qiuchang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-AD"></i>
                    <div class="name">AD</div>
                    <div class="fontclass">.icon-AD</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quanyi"></i>
                    <div class="name">权益</div>
                    <div class="fontclass">.icon-quanyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wuzi"></i>
                    <div class="name">物资</div>
                    <div class="fontclass">.icon-wuzi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-juxingkaobei"></i>
                    <div class="name">指引</div>
                    <div class="fontclass">.icon-juxingkaobei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhangaiwu"></i>
                    <div class="name">障碍物</div>
                    <div class="fontclass">.icon-zhangaiwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangshang"></i>
                    <div class="name">向上</div>
                    <div class="fontclass">.icon-xiangshang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanxing"></i>
                    <div class="name">圆形</div>
                    <div class="fontclass">.icon-yuanxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangxia"></i>
                    <div class="name">向下</div>
                    <div class="fontclass">.icon-xiangxia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-juxing"></i>
                    <div class="name">矩形</div>
                    <div class="fontclass">.icon-juxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoyuan"></i>
                    <div class="name">小圆</div>
                    <div class="fontclass">.icon-xiaoyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-X"></i>
                    <div class="name">X3</div>
                    <div class="fontclass">.icon-X</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuxing"></i>
                    <div class="name">图形2</div>
                    <div class="fontclass">.icon-tuxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuxing1"></i>
                    <div class="name">图形1</div>
                    <div class="fontclass">.icon-tuxing1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuxing2"></i>
                    <div class="name">图形3</div>
                    <div class="fontclass">.icon-tuxing2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sanjiaoxing"></i>
                    <div class="name">三角形</div>
                    <div class="fontclass">.icon-sanjiaoxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test"></i>
                    <div class="name">×</div>
                    <div class="fontclass">.icon-icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gou1"></i>
                    <div class="name">勾</div>
                    <div class="fontclass">.icon-gou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cardb-copy"></i>
                    <div class="name">卡</div>
                    <div class="fontclass">.icon-cardb-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cardb-copy-copy"></i>
                    <div class="name">卡</div>
                    <div class="fontclass">.icon-cardb-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanzhu1"></i>
                    <div class="name">赞助</div>
                    <div class="fontclass">.icon-zanzhu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xueyuan"></i>
                    <div class="name">学员</div>
                    <div class="fontclass">.icon-xueyuan</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
